<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
{#    <link type="text/css" href="https://cdn.staticfile.org/bootstrap/5.2.2/css/bootstrap-grid.css">#}
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
    .container{
        width: 600px;
        padding: 40px 80px;
        margin: 20px auto;
        border: 1px solid black;
        {#box-shadow: 2px 2px 2px rgba(0,0,0,.2);#}
        box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
        border-radius: 20px;
    }
    .code{
        display: flex;
    }
    .code .in{
        margin-right: 5px;
    }
</style>
</head>
<body>
    <h2 style="text-align: center">注册页面</h2>
{#    {% for item in form %}#}
{#        <div>#}
{#            {{ item.label }}:{{ item }}#}
{#        </div>#}
{#    {% endfor %}#}
    <div class="container">
        <form>
          {% for item in form %}
              {% if item.name == 'code' %}
                  <div class="form-group">
                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                    <div  class="code">
                        <div class="in">
                            {{ item }}
                        </div>
                        <input type="button" class="btn btn-default" value="点击获取验证码" id="code_id">
                    </div>

                  </div>
              {% else %}
                 <div class="form-group">
                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
    {#                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">#}
                        {{ item }}
                 </div>
              {% endif %}

          {% endfor %}
         <button type="submit" class="btn btn-primary">注册</button>
{#          <div style="display: flex;justify-content: center">#}
{#             #}
{#          </div>#}
        </form>
    </div>
    <script src="{% static 'js/http.js' %}"></script>
    <script>

        //监听发送验证码按钮

        function sendCode(){
            let btn=document.querySelector('#code_id')
            btn.addEventListener('click', async ()=>{
                let result=await http({
                    method:'get',
                    url:'http://ajax-base-api-t.itheima.net/api/getbooks',
                    params:{
                        id:1,

                    }
                })
                console.log(result)
            })
        }
        sendCode()
    </script>
</body>
</html>